import { ProTable } from '@ant-design/pro-components';
import { Button, Popconfirm, message, Modal, Tag  } from 'antd';
import RoleUploader from "@/pages/role-page/parts/RoleUploader"
import RoleEditorDrawer from "@/pages/role-page/parts/RoleEditorDrawer"
import { useRef } from "react";
import { firstValueFrom, map } from "rxjs"
import $http from "@/services/http.service.v2";
import $helper from "@/services/helper.service";


export default function RolePage() {
  const destroyingRef = useRef(false)
  const drawerRef = useRef()
  const actionRef = useRef()
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (_, _record, index) => {
        return <a>{index + 1}</a>
      },
    },
    {
      title: '角色',
      dataIndex: 'role_name',
      // render: (_) => <a>{_}</a>,
    },
    {
      title: '服务器',
      dataIndex: 'realm_name',
      // render: (_) => <a>{_}</a>,
    },
    {
      title: '类型',
      dataIndex: 'craft_type',
      render: (_) => _ === 1 ? <Tag>订单</Tag> : <Tag color='red'>盟约</Tag>,
    },
    {
      title: '操作',
      key: 'option',
      render: (_, record) => (
        <div className="-mx-1">
          <a className="mx-1" onClick={() => {
            drawerRef.current.open(record)
          }}>编辑</a>
          <Popconfirm
            disabled={destroyingRef.current}
            title="删除角色？"
            description="删除后无法恢复！！"
            okText="删除"
            cancelText="取消"
            onConfirm={() => {
              const loadingKey = $helper.uuid() 
              message.loading({ content: '正在删除...', duration: 0, key: loadingKey })
              destroyingRef.current = true
              $http.deleteRole(record.id).subscribe(() => {
                destroyingRef.current = false
                message.destroy(loadingKey)
                actionRef.current?.reload()
              })
          }}
          >
            <a className="mx-1 text-red-600">删除</a>
          </Popconfirm>
          
        </div>
      ),
    },
  ];
  function onClear() {
    Modal.confirm({
      title: '清空角色？',
      content: '清空后无法恢复，请谨慎操作。',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        return firstValueFrom(
          $http.clearRole().pipe(
            map(res => {
              if (!res.status) {
                message.error(res.message)
                return
              }
              message.success(res.message)
              actionRef.current?.reload()
            })
          )
        )
      }
    })
  }
  return (
    <div className='page-wrap role-page-wrap'>
      <div className="scroll-ele-wrapper">
        <ProTable
          actionRef={actionRef}
          columns={columns}
          request={(params, sorter, filter) => {
            // 表单搜索项会从 params 传入，传递给后端接口。
            console.log(params, sorter, filter);
            return firstValueFrom(
              $http.getRoleList().pipe(
                map(res => {
                  return {
                    data: res.data.list,
                    success: true,
                  }
                })
              )
            )
          }}
          // options={false}
          toolbar={{
            search: {
              onSearch: (value) => {
                alert(value);
              },
            },
            actions: [
              <Button type="primary" onClick={() => drawerRef.current.open()}>添加</Button>,
              <RoleUploader onFinish={() => actionRef.current?.reload()} />,
              <Button type="primary" danger onClick={onClear}>清空</Button>,
              // <RoleEditorDrawer key={2}>
              //   <Button type="primary">添加11</Button>
              // </RoleEditorDrawer>,
            ],
          }}
          rowKey="id"
          search={false}
          pagination={false}
        />
      </div>
      
      <RoleEditorDrawer ref={drawerRef} onFinish={() => actionRef.current?.reload()}/>
    </div>
  )
}